<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			.box{
				width: 100%;
				height: 200px;
				background: palegreen;
				font-size: 1rem;
			}
			
			/* 这个设备的最大宽度 */
			/* device-width <= 486px */
			
			
			/* 这个设备的宽度在487px与900px之间 */
			/* 487 <= device-width <= 900 */
			@media (min-width: 487px) and (max-width: 900px){
				.box{
					background: red;
				}
			}
			
			
			@media (max-width: 486px) {
				html{
					font-size: 18px;
				}
				.box{
					background:#ADFF2F;
				}
			}
		</style>
	</head>
	<body>
		
		<!-- 
			
			媒体查询 就是根据设备的宽度不同从而使用不同样式
			
		-->
		
		<div class="box">呵呵，这个对象这玩意时间处得久了可能慢慢颜色变了</div>
		
		<!-- 
		 
			媒体查询多用于响应式网站开发
			
			pc+移动端两套网站（多用于功能型网站 => 电商、crm、oa...）
				优点：更好的适应不同设备，可以将pc端和移动端风格明显区分开
				缺点：需要开发两套网页
			
			响应式网站(多用于展示型网站 => 企业官网、宣传页面...)
				优点：基本上写一套页面就可以，开发速度快、成本相对较低
				缺点：大部分页面只是修改了元素的排版方式，不能很好的区区分出风格
			
			正经写响应式网站时，一般都是用响应式框架 + 部分媒体查询
			
		-->
		
		
		
	</body>
</html>
